<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<div id="app">
		<form  action="#">
			
			<span>
				姓名:<input   type="text"  v-model="user.username"/>
			</span>
			
			<br />
			<span>
				密码:<input   type="text"  v-model="user.password"/>
			</span>
			
			<span>
				<input  type="submit"  value="提交" @click.prevent="addForm" />
			</span>
			
			<br />
			<span>
			    请选择
				<select  v-model="user.book">
					<option  value="java编程基础">java编程基础</option>
					<option  value="java技术卷">java技术卷</option>
					<option  value="java编程思想">java编程思想</option>
				</select>
			</span>
			
			<br />
			<!--单选框的练习-->
			<span>
				性别: <input name="gender" v-model="sex"  type="radio"/>男
				      <input name="gender" v-model="gender" type="radio"/>女
			</span>
			
			
			<br />
			<!--复选框-->
			爱好:
			<input  type="checkbox"  name="hobby" value="吃"  v-model="user.hobby"/>吃
			<input  type="checkbox"  name="hobby" value="喝" v-model="user.hobby"/>喝
			<input  type="checkbox"  name="hobby" value="玩" v-model="user.hobby"/>玩
			<input  type="checkbox"  name="hobby" value="乐" v-model="user.hobby"/>乐
			
			
		</form>
			
			
			<!-- <div>{{user.username}}  {{user.password}}</div> -->
			
		</div>
		
		
		
		<script src="../js/vue.js"></script>
		
		<script>
		
		const  app=new  Vue({
			el: "#app",
			data: {
				name: "vue案例" ,
				url: "https://www.baidu.com/",
				user: {
					username: '',
					password: '',
					book: 'java编程思想',
					gender : '男',
					hobby : []
				}
			},
			methods:{
				addForm(){
					console.log(this.user.username+"-----"+this.user.password+"------"+this.user.localtion)
				}
			}
		})
		
		</script>
		
		
		
	</body>
	
</html>
